// pages/dazhuanpan002/dazhuanpan002.js
const utils = require('../../utils/util.js');



Page({
  /**
   * 页面的初始数据
   */
  data: {
    awardsList: [ //奖品配置
      { bgColor: '#A2B5CD', textColor: 'rgb(183, 100, 39)', name: '一等奖' },
      { bgColor: '#9966FF', textColor: 'rgb(183, 100, 39)', name: '二等奖' },
      { bgColor: '#66FFFF', textColor: 'rgb(183, 100, 39)', name: '三等奖' },
      { bgColor: '#CCFF66', textColor: 'rgb(183, 100, 39)', name: '四等奖' },
      { bgColor: '#FFEC8B', textColor: 'rgb(183, 100, 39)', name: '五等奖' },
      { bgColor: '#B4EEB4', textColor: 'rgb(183, 100, 39)', name: '谢谢惠顾' }
    ],
    animationData: {},
    btnDisabled: false, //开始抽奖按钮是否使能 (true:不使能；false:使能)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    // 把设备的尺寸赋值给画布，以做到全屏效果
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowWidth: res.windowWidth,
          windowHeight: res.windowHeight
        });
      },
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.drawAwardRoundel();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  //画抽奖圆盘
  drawAwardRoundel: function () {
    var len = this.data.awardsList.length
    var itemArc = (360 / len) * (Math.PI / 180)  /*每块扇形的弧度*/
    var radius = 130
    const ctx = wx.createCanvasContext('canvas')
    ctx.translate(this.data.windowWidth / 2, this.data.windowWidth / 2)

    //1.圆盘内部扇形片
    for (var i = 0; i < len; i++) {
      var prizeObj = this.data.awardsList[i]
      //
      ctx.beginPath()
      ctx.moveTo(0, 0)
      ctx.arc(0, 0, radius, i * itemArc, (i+1)*itemArc)
      ctx.setFillStyle(prizeObj.bgColor) //扇形背景色
      ctx.fill()

      // 保存当前状态
      ctx.save();

      //扇形上的奖品文字
      ctx.beginPath()
      ctx.setFontSize(16) //设置文字字号大小
      ctx.setFillStyle(prizeObj.textColor) //设置文字颜色
      ctx.setTextAlign("center");//使文字水平居中显示
      ctx.setTextBaseline("middle");//使文字垂直居中显示
      ctx.rotate(itemArc * (i + 2)); //旋转文字，从 i+2 开始，因为扇形是从数学意义上的第四象限第一个开始的，文字目前的位置是在圆心正上方，所以起始位置要将其旋转2个扇形的角度让其与第一个扇形的位置一致。 注：i+2是根据6块扇形，如果不是6块扇形，需要另做计算
      ctx.fillText(prizeObj.name, 0, -radius*0.8)
      

      // 恢复前一个状态
      ctx.restore()
    }

    //2.圆盘边框
    ctx.beginPath()
    ctx.setLineWidth(10)
    ctx.setStrokeStyle("#FFCC00")
    ctx.arc(0, 0, radius+10, 0, 2 * Math.PI)
    ctx.stroke()


    ctx.draw()
  },

  
  /**
   * 开始抽奖的响应
   */
  start: function (event) {
    if (this.data.btnDisabled) //正在抽奖期间，再次点击该按钮无效
      return

    
    // 随机一个奖品
    var winIndex = utils.getRandom(this.data.awardsList.length - 1);
    var runNum = 8;//旋转8周
    var duration = 4000;//时长
    console.log('开始抽奖: ' + winIndex + ";  " + this.data.awardsList[winIndex].name)

    // 旋转角度
    this.runDeg = this.runDeg || 0;
    this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum + (4-winIndex) * (360 / 6))
    //创建动画
    var animationRun = wx.createAnimation({
      duration: duration,
      timingFunction: 'ease'
    })
    console.log('this.runDeg: ' + this.runDeg)
    animationRun.rotate(this.runDeg).step();
    this.setData({
      animationData: animationRun.export(),
      btnDisabled: true
    });

    // 中奖提示
    setTimeout(function () {
      wx.showModal({
        title: '恭喜',
        content: '获得' + (this.data.awardsList[winIndex].name),
        showCancel: false
      });
      this.setData({
        btnDisabled: false
      });
    }.bind(this), duration);
  },
})